<template>
	<view class="container">
		<view class="wrap">
			<scroll-view class="scroll-list" scroll-y="true" @scrolltolower="loadMore">
				<!-- 银行卡卡片 -->
				<view class="bank-card-wrapper" v-if="isPettyCash && bankCardInfo">
					<view class="bank-card">
						<view class="bank-card-bg"></view>
						<view class="bank-card-content">
							<view class="bank-name">{{ bankCardInfo.bankName || '银行名称' }}</view>
							<view class="card-number">{{ formatCardNumber(bankCardInfo.cardNumber) }}</view>
							<view class="card-footer">
								<view class="card-holder">
									<text class="card-value">{{ bankCardInfo.accountName || '--' }}</text>
								</view>
								<view class="card-balance">
									<text class="card-value">¥{{ formatMoney(bankCardInfo.balance) }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-cell-group class="list" :border="false">
					<u-swipe-action class="list-item" :options="options" v-for="(item, index) in list" :key="item.id" :index="index" @click="optionsClick">
						<u-cell-item :arrow="true" @click="navTo('dictTypeForm?dictCode='+item.dictCode)">
							<text slot="title">{{item.dictLabel}}</text>
							<text slot="label">
								<view>
									<text>{{item.dictValue}}</text>
								</view>
							</text>
						</u-cell-item>
					</u-swipe-action>
				</u-cell-group>
			</scroll-view>
			<view class="btn-plus" @click="navTo('dictTypeForm?dictType='+query.dictType)">
				<u-icon name="plus-circle-fill" size="90" color="#3d87ff"></u-icon>
			</view>
		</view>
	</view>
</template>
<script>
/**
 * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
 */
export default {
	data() {
		return {
			title:'',
			query: {
				dictType:'',
			},
			list: [],
			count: 0,
			options: [
				{text: '删除', style: { background: '#dd524d'}},
				// {text: '上传', style: { background: '#414ee0'}},
			],
			mainTypeList:[],
		};
	},
	computed: {
		// 判断是否为备用金类型
		isPettyCash() {
			return this.query.dictType === 'petty_cash'
		},
		// 从列表中提取银行卡信息
		bankCardInfo() {
			if (!this.isPettyCash || !this.list || this.list.length === 0) {
				return null
			}
			
			const info = {
				cardNumber: '',
				bankName: '',
				accountName: '',
				balance: 0
			}
			
			// 从列表中根据 dictLabel 提取信息
			this.list.forEach(item => {
				const label = (item.dictLabel || '').toLowerCase()
				const value = item.dictValue || ''
				
				if (label.includes('银行卡号')) {
					info.cardNumber = value
				} else if (label.includes('账户名称')) {
					info.bankName = value
				} else if (label.includes('开户姓名')) {
					info.accountName = value
				} else if (label.includes('账户余额')) {
					info.balance = value
				}
			})
			
			// 至少要有卡号或银行名称才显示
			if (!info.cardNumber && !info.bankName) {
				return null
			}
			
			return info
		}
	},
	onLoad(params) {
		this.query.dictType = params.dictType
		this.title = params.title
		uni.setNavigationBarTitle({
			title: this.title
		});
	},
	onShow() {
		this.search('');
	},
	methods: {
		loadList() {
			let that = this
			this.$u.api.dictType.list(this.query).then(res => {
				if (!res || res.length == 0){
					return;
				}
				that.list = this.list.concat(res);
				console.log(that.list);
				
			});
		},
		optionsClick(rowIndex, btnIndex) {
			let self = this, row = self.list[rowIndex];
			if(btnIndex == 1) {
				this.navTo('formUpload?dictCode='+row.dictCode);
			} else if(btnIndex == 0) {
				uni.showModal({
					title: '提示',
					content: '确认要删除该数据吗？',
					showCancel: true,
					success: function (res2) {
						if (res2.confirm) {
							self.$u.api.dictType.delete({dictCode: row.dictCode}).then(res => {
								self.$u.toast(res.message);
								if (res.result == 'true'){
									self.list.splice(rowIndex, 1);
								}
							});
						}
					}
				});
			}
		},
		search(value) {
			this.list = [];
			this.loadList();
		},
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		// 格式化卡号（每4位加空格）
		formatCardNumber(cardNumber) {
			if (!cardNumber) return '**** **** **** ****'
			const cleaned = cardNumber.replace(/\s/g, '')
			if (cleaned.length <= 4) return cleaned
			return cleaned.match(/.{1,4}/g).join(' ')
		},
		// 格式化金额
		formatMoney(amount) {
			if (amount === null || amount === undefined || amount === '') {
				return '0.00'
			}
			const num = parseFloat(amount)
			if (isNaN(num)) {
				return '0.00'
			}
			return num.toFixed(2)
		}
	}
};
</script>
<style lang="scss">
.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	// padding: 20rpx;
	box-sizing: border-box;
}
page {
	background-color: #f8f8f8;
}
.btn-plus {
	position: absolute;
	bottom: 50rpx;
	right: 50rpx;
	z-index: 1;
	opacity: 0.6;
}
.btn-plus:hover {
	opacity: 1;
}.list {
	.list-item {
		position: relative;
		view {
			display: flex;
			justify-content: space-between;
			
			text {
				flex: 0 0 50%;
				text-align: left;
			}
		}
		&::after {
			content: '';
			position: absolute;
			left: 30rpx;
			right: 30rpx;
			bottom: 0;
			height: 1rpx;
			background-color: #D7DEEB;
		}
		&:last-child::after {
			display: none;
		}
	}
}
.time-filter {
	padding: 20rpx 30rpx;
	background-color: #fff;
	border-bottom: 1px solid #eee;
	position: fixed;
    width: 100%;
    z-index: 9999;
	
	.filter-item {
		display: flex;
		align-items: center;
		height: 70rpx;
		padding: 0 20rpx;
		
		.filter-text {
			margin-right: 10rpx;
			font-size: 28rpx;
			color: #333;
		}
	}
}

.time-popup {
	background-color: #fff;
	
	.popup-header {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1rpx solid #eee;
		
		.title {
			font-size: 32rpx;
			color: #333;
		}
	}
	
	.popup-content {
		.time-option {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 1rpx solid #eee;
			
			.option-text {
				font-size: 30rpx;
				color: #333;
			}
			
			&:active {
				background-color: #f5f5f5;
			}
		}
	}
}

.date-picker-popup {
	background-color: #fff;
	
	.date-header {
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 32rpx;
		color: #333;
		border-bottom: 1px solid #eee;
	}
	
	.date-display {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		color: #2979ff;
		border-bottom: 1px solid #eee;
	}
	
	.date-tabs {
		display: flex;
		height: 80rpx;
		background: #fff;
		border-bottom: 1px solid #eee;
		
		.tab-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #666;
			position: relative;
			
			&.active {
				color: #2979ff;
				
				&::after {
					content: '';
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					height: 2px;
					background-color: #2979ff;
				}
			}
		}
	}
	
	.picker-labels {
		height: 80rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #f8f8f8;
		border-bottom: 1px solid #eee;
		
		.label-item {
			flex: 1;
			text-align: center;
			font-size: 28rpx;
			color: #666;
		}
	}
	
	.picker-container {
		height: 400rpx;
		position: relative;
		
		.picker-view {
			width: 100%;
			height: 100%;
		}
		
		.picker-item {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 32rpx;
			color: #333;
		}
	}
	
	.picker-actions {
		display: flex;
		height: 100rpx;
		border-top: 1px solid #eee;
		
		.picker-btn {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			
			&.cancel {
				color: #333;
				background-color: #fff;
				border-right: 1px solid #eee;
			}
			
			&.confirm {
				color: #fff;
				background-color: #2979ff;
			}
		}
	}
}
/deep/ .list .u-cell-item-box .u-cell_title{
	display: flex;
	flex-direction: column;
}

/* 银行卡卡片 */
.bank-card-wrapper {
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.bank-card {
	position: relative;
	width: 100%;
	height: 380rpx;
	border-radius: 24rpx;
	overflow: hidden;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
}

.bank-card-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	z-index: 1;
}

.bank-card-bg::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -20%;
	width: 400rpx;
	height: 400rpx;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
}

.bank-card-bg::after {
	content: '';
	position: absolute;
	bottom: -30%;
	left: -10%;
	width: 300rpx;
	height: 300rpx;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
}

.bank-card-content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 40rpx;
	color: #ffffff;
}

.bank-name {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
	letter-spacing: 2rpx;
}

.card-number {
	font-size: 36rpx;
	font-weight: bold;
	letter-spacing: 8rpx;
	margin: 40rpx 0;
	font-family: 'Arial', sans-serif;
}

.card-footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: auto;
}

.card-holder,
.card-balance {
	display: flex;
	flex-direction: column;
}

.card-label {
	font-size: 24rpx;
	opacity: 0.8;
	margin-bottom: 8rpx;
}

.card-value {
	font-size: 32rpx;
	font-weight: bold;
}
</style>
